<template>
	<div class="read">
		<h1 class="title">必读管理</h1>
		<ul class="menu">
			<li class="menu-item" :class="{'active':current === 0}"  @click="changeTab(0)">
				文章管理
			</li>			
			<li class="menu-item" :class="{'active':current === 1}"  @click="changeTab(1)">
				添加文章
			</li>
		</ul>
		<article-m v-if="current === 0" :data="this.data"></article-m>
		<add-article v-if="current === 1" :data="this.data"></add-article>
	</div>
</template>
<script>
	import articleM from './components/articleM'
	import addArticle from './components/addArticle'
	export default{
		name : 'mustRead',
		data(){
			return{
				current : 0
			}
		},
		props:['data'],
		methods:{
			changeTab(index){
				this.current = index
			}
		},
		components:{
			articleM,
			addArticle
		}
	}
</script>
<style lang="less" scoped>
	.read{
		text-align: left;
		.title{
			margin-top: -1px;
			text-align: left;
			font-size: 34px;
			color: #000;
			font-weight: 500;
			padding: 38px 0 28px 72px;
			border-top: 1px solid #cdcdcd;
			border-bottom: 1px solid #cdcdcd;
		}
		.menu{
			overflow: hidden;
			list-style: none;
			background: #f6f8f9;
			border-bottom: 1px solid #cdcdcd;
			.menu-item{
				float: left;
				margin-top: 10px;
				margin-left: 15px;
				height: 40px;
				line-height: 40px;
				cursor: pointer;
			}
			.active{
				color: #1a90ea;
				border-bottom: 2px solid #1a90ea;
			}
		}
	}
</style>